<html>
	<head>
		<title>PBR Path Tracing</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<style>
			html, body {
				margin: 0;
				padding: 0;
				background-color: #111;
			}

			#info {
				position: absolute;
				bottom: 0;
				left: 0;
				font-family: 'Courier New', Courier, monospace;
				color: white;
				pointer-events: none;
			}

			#samples, #credits {

				opacity: 0.5;
				background-color: rgba( 0.0, 0.0, 0.0, 0.5 );
				padding: 5px;
				display: inline-block;

			}

			#loading {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-family: 'Courier New', Courier, monospace;
			}

			.checkerboard {
				background-image:
					linear-gradient(45deg, #222 25%, transparent 25%),
					linear-gradient(-45deg, #222 25%, transparent 25%),
					linear-gradient(45deg, transparent 75%, #222 75%),
					linear-gradient(-45deg, transparent 75%, #222 75%);
				background-size: 20px 20px;
				background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
			}
		</style>

	</head>
	<body>
		<div id="loading">LOADING</div>
		<div id="info">
			<div>
				<div id="samples">--</div>
			</div>
			<div>
				<div id="credits">--</div>
			</div>
		</div>
		<script type="module">
			import { MeshPhysicalMaterial, Color } from 'three';

			window.MODEL_LIST = {
				'M2020 Rover': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/Perseverance.glb',
					credit: 'Model credit NASA / JPL-Caltech',
				},
				'M2020 Helicopter': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/Ingenuity.glb',
					credit: 'Model credit NASA / JPL-Caltech',
				},
				'Gelatinous Cube': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/gelatinous-cube/scene.gltf',
					credit: 'Model by "glenatron" on Sketchfab.',
					rotation: [ 0, - Math.PI / 8, 0.0 ],
					opacityToTransmission: true,
					bounces: 8,
					postProcess( model ) {

						const toRemove = [];
						model.traverse( c => {

							if ( c.material ) {

								if ( c.material instanceof MeshPhysicalMaterial ) {

									const material = c.material;
									material.roughness *= 0.1;
									material.metalness = 0.0;
									material.ior = 1.2;
									material.map = null;

									c.geometry.computeVertexNormals();

								} else if ( c.material.opacity < 1.0 ) {

									toRemove.push( c );

								}

							}

						} );

						toRemove.forEach( c => {

							c.parent.remove( c );

						} );

					}
				},
				'Octopus Tea': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/octopus-tea/scene.gltf',
					credit: 'Model by "AzTiZ" on Sketchfab.',
					opacityToTransmission: true,
					bounces: 8,
					postProcess( model ) {

						const toRemove = [];
						model.traverse( c => {

							if ( c.material ) {

								if ( c.material instanceof MeshPhysicalMaterial ) {

									const material = c.material;
									material.metalness = 0.0;
									if ( material.transmission === 1.0 ) {

										material.roughness = 0.0;
										material.metalness = 0.0;

										// 29 === glass
										// 27 === liquid top
										// 23 === liquid
										if ( c.name.includes( '29' ) ) {

											c.geometry.index.array.reverse();
											material.ior = 1.52;
											material.color.set( 0xffffff );

										} else {

											material.ior = 1.2;

										}

									}

								} else if ( c.material.opacity < 1.0 ) {

									toRemove.push( c );

								}

							}

						} );

						toRemove.forEach( c => {

							c.parent.remove( c );

						} );

					}
				},
				'Scifi Toad': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/scifi-toad/scene.gltf',
					credit: 'Model by "YuryTheCreator" on Sketchfab.',
					opacityToTransmission: true,
					bounces: 8,
					postProcess( model ) {

						model.traverse( c => {

							if ( c.material && c.material instanceof MeshPhysicalMaterial ) {

								const material = c.material;
								material.metalness = 0.0;
								material.roughness = 0.005;
								material.ior = 1.645;
								material.color.lerp( new Color( 0xffffff ), 0.65 );

							}

						} );

					}
				},
				'Halo Twist Ring': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/ring-twist-halo/scene.glb',
					credit: 'Model credit NASA / JPL-Caltech',
					opacityToTransmission: true,
					bounces: 15,
					postProcess( model ) {

						model.traverse( c => {

							if ( c.material ) {

								if ( c.material instanceof MeshPhysicalMaterial ) {

									if ( c.material.transmission === 1.0 ) {

										const material = c.material;
										material.roughness *= 0.1;
										material.metalness = 0.0;
										material.ior = 1.8;
										material.color.set( 0xffffff );

									} else {

										c.material.roughness *= 0.1;

									}

								}

							}

						} );

					}
				},
				// 'Vino Bike': {
				// 	url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/vino-bike/scene.gltf',
				// 	credit: 'glTF Sample Model.',
				// 	postProcess( model ) {

				// 		model.traverse( c => {
				// 			console.log(c.name);
				// 			if ( c.name === 'mesh_0') {

				// 				// TODO: remove this
				// 				c.material.clearcoatRoughness = 0;
				// 				c.material.clearcoatMap = null;
				// 				c.material.clearcoatNormalMap = null;
				// 				c.material.clearcoatNormalScale.setScalar( 1. );

				// 			}
				// 		})

				// 	}
				// },
				'Damaged Helmet': {
					url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
					credit: 'glTF Sample Model.',
				},
				'Flight Helmet': {
					url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/FlightHelmet/glTF/FlightHelmet.gltf',
					credit: 'glTF Sample Model.',
				},
				'Statue': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/threedscans/Le_Transi_De_Rene_De_Chalon.glb',
					credit: 'Model courtesy of threedscans.com.',
				},
				'Crab Sculpture': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/threedscans/Elbow_Crab.glb',
					rotation: [ 3.1 * Math.PI / 4, Math.PI, 0 ],
					credit: 'Model courtesy of threedscans.com.',
				},
				'Japanese Bridge Garden': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/japanese-bridge-garden/scene.glb',
					credit: 'Model by "kristenlee" on Sketchfab.',
				},
				'Imaginary Friend Room': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/imaginary-friend-room/scene.glb',
					credit: 'Model by "Iman Aliakbar" on Sketchfab.',
				},
				'Botanists Study': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/botanists-study/scene.gltf',
					credit: 'Model by "riikkakilpelainen" on Sketchfab.',
				},
				'Botanists Greenhouse': {
					url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/botanists-greenhouse/scene.gltf',
					credit: 'Model by "riikkakilpelainen" on Sketchfab.',
				},
				// 'Astraia': {
				// 	url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/astraia/scene.gltf',
				// 	credit: 'Model by "Quentin Otani" on Sketchfab',
				// 	removeEmission: true,
				// 	postProcess( model ) {

				// 		const toRemove = [];
				// 		model.traverse( c => {

				// 			if ( c.name.includes( 'ROND' ) ) {

				// 				toRemove.push( c );

				// 			}

				// 		} );

				// 		toRemove.forEach( c => {

				// 			c.parent.remove( c );

				// 		} );

				// 	}
				// },

			};
		</script>
		<script src="./index.js" type="module"></script>
	</body>
</html>
